@import "../../styles/mixins.scss";
@import "../../styles/animation.scss";
@import "../../styles/extends.scss";

.dark {
  @extend %container-dark;

  h2 {
    @extend %title-dark;
    @extend %section-title-dark;
  }

  .skills__footer {
    @apply text-myTheme-light;
  }
}

.light {
  @extend %container-light;

  h2 {
    @extend %title-light;
    @extend %section-title-light;
  }

  .skills__footer {
    @apply text-myTheme-primary;
  }
}

.dark, .light {
  .title {
    @include shadow();
    @apply w-11/12
    mb-10;
  }

  .skills {
    @apply w-11/12
    max-w-screen-2xl
    h-max
    flex
    flex-col
    items-center
    gap-10;


    .skills__examples {
      @apply relative
      w-full
      h-max
      flex
      flex-col
      items-center
      justify-center
      mt-6;

      .examples__title {
        @apply w-11/12 h-fit;

        h3 {
          @extend %title;
          @apply text-xl
          xl:text-2xl
          text-myTheme-light
          block
          w-11/12
          mb-10;
        }
      }

      .examples__block {
        @apply w-full
        flex
        flex-col
        gap-12
        justify-center
        items-center;
        
        .block__example {
          @apply
          left-0
          w-11/12
          xl:w-full
          h-fit
          flex
          flex-row
          gap-2
          cursor-default
          overflow-hidden;
  
          .examples__decs {
            @apply
            h-96
            min-h-fit
            w-8/12
            min-w-100
            xl:min-w-128
            px-4
            py-4
            flex
            flex-col
            justify-center
            gap-3
            rounded-e-2xl
          bg-myTheme-dark;
            
            .decs__text__main, .decs__text__second {
              @apply
              uppercase
              text-ellipsis
              flex
              items-center;
            }

            .decs__text__main {
              @apply text-myTheme-light
              text-3xl
              xl:text-4xl;
            }

            .decs__text__second {
              @apply text-myTheme-accent
              text-lg
              xl:text-xl;
            }
          }
        }
      }
    }

    .skills__experience {
      @apply w-full
      cursor-default
      mt-4;

      h3 {
        @extend %title;
        @apply text-xl 
        xl:text-2xl
        mb-2;
      }
      
      .skills__project {
        @apply py-4
        flex
        flex-col
        items-center;

        h5 {
          @apply w-5/6
          font-myTextFont
          text-lg
          xl:text-xl
          mb-1;
        }

        ul {
          @apply list-none;
        }

        .project__desc, ul, li {
          @apply w-5/6
          font-myTextFont
          text-xl
          xl:text-2xl
          indent-10;
        }

        a {
          @apply italic text-myTheme-accent;
        }
      }
    }

    .skills__footer {
      @include shadow();
      @apply w-full
      flex
      justify-center
      items-center
      border-t-4
      border-opacity-50
      border-t-myTheme-accent;

      .footer__text {
        @apply 
        text-xl
        xl:text-2xl
        uppercase
        font-semibold
        py-8;
      }
    }
  }
}
